<template>
  <div class="files">
    <div class="files-header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/user/home/menu' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>我的申请</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class='software'>
      <table-set :tableHeader="tableHeader" @headerSet="headerSet"></table-set>
      <span class="down-execel2" style="float: right;margin-right: 20px">
        <Poptip v-model="showFilter" placement="bottom-end">
          <a href="javascript:;" class="poptip-condition-add lookup-list">列表查找</a>
          <div slot="content">
            <Poptip v-model="showFilterCondition" placement="bottom-start" class="poptip-condition">
              <a href="javascript:;" class="poptip-condition-add">添加过滤条件</a>
              <div slot="content" class="condition-list">
                <ul>
                  <li
                    v-for="(item, index) in selectHead"
                    :key="index"
                    class="poptip-condition-item"
                    @click="addFilterCondition(item)"
                  >{{item.label}}</li>
                </ul>
              </div>
            </Poptip>
            <el-form
              :model="conditionForm"
              ref="conditionForm"
              label-min-width="120px"
              class="demo-dynamic"
              @submit.native.prevent
            >
              <template v-for="(condition, index) in conditionForm.condition">
                <el-form-item
                  v-if="condition.label == '联络人电话' || condition.label == '联络人邮箱' "
                  :label="condition.label"
                  :key="condition.key"
                  :prop="'condition.' + index + '.value'"
                  :rules="{required: true, message: condition.label + '不能为空', trigger: 'blur'}"
                >
                  <el-input
                    size="small"
                    v-model="condition.value"
                    @keyup.enter.native="submitsearch('conditionForm')"
                  ></el-input>
                  <!-- 删除 -->
                  <i
                    class="el-icon-close recommend-close"
                    @click.stop="removeDomain(condition)"
                    style="font-size:25px;margin-left:20px;vertical-align:middle"
                  ></i>
                </el-form-item>
                <el-form-item
                  v-if="condition.label == '联络人'"
                  :label="condition.label"
                  :key="condition.key"
                  :prop="'condition.' + index + '.value'"
                  :rules="{required: true, message: condition.label + '不能为空', trigger: 'blur'}"
                >
                  <!-- 添加空格 对齐 -->
                  <label slot="label">{{condition.label}}&emsp;&emsp;</label>
                  <el-input
                    size="small"
                    v-model="condition.value"
                    @keyup.enter.native="submitsearch('conditionForm')"
                  ></el-input>
                  <!-- 删除 -->
                  <i
                    class="el-icon-close recommend-close"
                    @click.stop="removeDomain(condition)"
                    style="font-size:25px;margin-left:20px;vertical-align:middle"
                  ></i>
                </el-form-item>
                <el-form-item
                  v-if="condition.label === '提交时间' || condition.label === '更新时间' || condition.label === '订单编号' || condition.label === '软著简称' || condition.label === '软著全称' || condition.label === '订单状态'"
                  :label="condition.label"
                  :key="condition.key"
                  :prop="'condition.' + index + '.value'"
                  :rules="{required: true, message: condition.label + '不能为空', trigger: 'blur'}"
                >
                  <!-- 添加空格 对齐 -->
                  <label slot="label">{{condition.label}}&emsp;</label>
                  <el-date-picker
                    v-model="condition.value"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    size="small"
                    :validate-event="false"
                    v-if="condition.label === '提交时间' || condition.label === '更新时间'"
                  ></el-date-picker>
                  <el-input
                    v-else
                    size="small"
                    v-model="condition.value"
                    @keyup.enter.native="submitsearch('conditionForm')"
                  ></el-input>
                  <!-- 删除 -->
                  <i
                    class="el-icon-close recommend-close"
                    @click.stop="removeDomain(condition)"
                    style="font-size:25px;margin-left:20px;vertical-align:middle"
                  ></i>
                </el-form-item>
              </template>
            </el-form>

            <div class="btns">
              <el-button @click="resetForm('conditionForm')" size="mini" v-no-more-click:3000>重置</el-button>
              <el-button @click="submitsearch('conditionForm')" size="mini" v-no-more-click:3000>查询</el-button>
            </div>
          </div>
        </Poptip>
      </span>
      <span class="writing2">
        {{`我的软著：${userData.software ? userData.software : 0 }`}}
      </span>
      <span class="soft-patent2" @click="toPatent">
        {{`我的专利：${userData.processing ? userData.processing : 0 }`}}
      </span>
      <!-- :height="tableHeight"  :max-height="tableHeight"-->
      <el-table
        @sort-change="tableSort"
        :data="tableData"
        ref="soft-table"
        height="85%"
        v-loading="loading"
        v-if="table_show"
        border
        stripe
        style="width: 100%"
        filters
      >
        <template v-for="(item, index) in tableHeader">
          <el-table-column
            v-if="item.label == '订单编号' && item.is_show"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            align="left"
            min-width="200"
            sortable="custom"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            v-if="item.label == '联络人' && item.is_show"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            align="left"
            min-width="100"
            :show-overflow-tooltip="true"
            sortable="custom"
          ></el-table-column>
          <el-table-column
            v-if="item.label == '联络人电话' && item.is_show"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            align="left"
            min-width="130"
            sortable="custom"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            v-if="item.label == '联络人邮箱' && item.is_show"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            align="left"
            min-width="150"
            :show-overflow-tooltip="true"
            sortable="custom"
          ></el-table-column>
          <el-table-column
            v-if="item.label == '软著简称' && item.is_show"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            align="left"
            min-width="150"
            :show-overflow-tooltip="true"
            sortable="custom"
          ></el-table-column>
          <el-table-column
            v-if="item.label == '软著全称' && item.is_show"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            align="left"
            min-width="150"
            :show-overflow-tooltip="true"
            sortable="custom"
          ></el-table-column>
          <el-table-column
            v-if="item.label == '软著说明文件' && item.is_show"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            align="left"
            min-width="150"
          >
            <template slot-scope="scope">
              <a
                v-if="scope.row.instruction_file"
                :href="baseUrl +'/api/download?path=' + scope.row.instruction_file"
                :download="scope.row.instruction_file"
                class="icon-filedload"
              ></a>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.label == '软著源码' && item.is_show"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            align="left"
            min-width="100"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <a
                v-if="scope.row.code_file"
                :href="baseUrl +'/api/download?path=' + scope.row.code_file"
                :download="scope.row.code_file"
                class="icon-filedload"
              ></a>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.label == '订单状态' && item.is_show"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            align="left"
            min-width="110"
            sortable="custom"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.status == '待处理'" class="font_wait">{{scope.row.status}}</span>
              <span
                v-else-if="scope.row.status == '处理中'"
                class="font_processing"
              >{{scope.row.status}}</span>
              <span v-else class="font_complete">{{scope.row.status}}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.label == '提交时间' && item.is_show"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            align="left"
            min-width="160"
            sortable="custom"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            v-if="item.label == '更新时间' && item.is_show"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            align="left"
            min-width="160"
            sortable="custom"
            :show-overflow-tooltip="true"
          ></el-table-column>
        </template>
      </el-table>
     <pagination @paginationChange="paginateChange" :total="total"></pagination>
    </div>
  </div>
</template>

<script>
import Pagination from "~/components/pagination";
import tableSet from "~/components/tableSet";
import fncSearch from "~/components/searchSrceen/fnc-search.js";
export default {
  components: {
    Pagination,
    tableSet,
    fncSearch
  },
  data() {
    return {
      baseUrl: global.baseurl,
      table_show: true,
      loading: false,
      tableData: [],
      current_page: 1,
      per_page: 25,
      total: 0,
      checked99: true,
      tableHeader: [
        // {
        //     label: 'ID',
        //     is_show: true
        // },
        {
          label: "订单编号",
          prop: "order_number",
          is_show: true
        },
        {
          label: "联络人",
          prop: "liaisons",
          is_show: true
        },
        {
          label: "联络人电话",
          prop: "liaisons_tel",
          is_show: true
        },
        {
          label: "联络人邮箱",
          prop: "liaisons_email",
          is_show: true
        },
        {
          label: "软著简称",
          prop: "abbreviation",
          is_show: true
        },
        {
          label: "软著全称",
          prop: "name",
          is_show: true
        },
        {
          label: "软著说明文件",
          prop: "instruction_file",
          is_show: true
        },
        {
          label: "软著源码",
          prop: "code_file",
          is_show: true
        },
        {
          label: "订单状态",
          prop: "status",
          is_show: true
        },
        {
          label: "提交时间",
          prop: "created_at",
          is_show: true
        },
        {
          label: "更新时间",
          prop: "updated_at",
          is_show: true
        }
      ],
      userData: {},
      showFilter: false,
      showFilterCondition: false,
      // 筛选条件
      conditionForm: {
        condition: []
      },
      search_params: {}
    };
  },

  created() {
    this.getTableData();
    this.getUserData();
  },

  computed: {
    // tableHeight() {
    //   let height = 1000;
    //   if (process.client) {
    //     height = window.innerHeight - 360;
    //   }
    //   return height;
    // },
    selectHead() {
      let arr = this.tableHeader.filter(
        v => v.prop != "instruction_file" && v.prop != "code_file"
      );
      return arr;
    }
  },

  methods: {
    toPatent(){
      this.$router.push('/user/myApply/patent')
    },
    paginateChange(params) {
      this.per_page = params.perPage;
      this.current_page = params.page;
      this.getTableData();
    },
    headerSet(data) {
      this.table_show = false;
      this.tableHeader = data;
      this.$nextTick(() => {
        this.table_show = true;
      });

      setTimeout(() => {
        this.$nextTick(() => {
          this.gwm();
        });
      }, 300);
    },
    gwm() {
      //水印,非管理员要设置
      if (
        this.$store.state.user.role_id != 1 &&
        this.$route.path != "/admin/register" &&
        this.$route.path != "/admin/personalCenter/dstribution" &&
        this.$route.path != "/admin/personalCenter/myPurse" &&
        this.$route.path != "/admin/activityList/activityConfig" &&
        this.$route.path != "/admin/activityList/sysConfig" &&
        this.$route.path != "/admin/login" &&
        this.$route.path != "/admin/agentImprove" &&
        this.$route.path != "/order/login"
      ) {
        let that = this;
        let gwm = require("gwm");
        gwm.creation({
          txt: that.$store.state.user.name,
          container: ".el-table", //#gwm
          fontSize: 40
        });
      }
    },
    tableSort(column) {
      let params = {
        sort_str: column.prop
      };
      if (column.order === "descending") {
        params.sort_str = column.prop;
        params.sort_order = "desc";
      } else if (column.order === "ascending") {
        params.sort_str = column.prop;
        params.sort_order = "asc";
      } else {
        params = {};
      }
      this.getTableData(params);
    },
    getTableData(args) {
      let params = {
        page: this.current_page,
        perPage: this.per_page,
        consumer_id: this.$store.state.user.id,
        sort_str: "created_at",
        sort_order: "desc"
      };
      params = { ...params, ...this.search_params };
      if (args) {
        params = { ...params, ...args };
      }
      this.loading = true;
      this.$axios
        .get("/api/software", {
          params: params
        })
        .then(res => {
          if (res.data.code == 200) {
            // console.log(res.data)
            this.tableData = res.data.data;
            this.total = res.data.page.total;
            this.loading = false;
          } else {
            this.loading = false;
            this.$message({
              type: "error",
              message: res.data.message
            });
          }
        })
        .catch(e => {
          this.loading = false;
        });
    },
    addFilterCondition(item) {
      let filterItem = {
        value: "",
        label: item.label,
        parameter: item.prop,
        key: Date.now()
      };

      if (this.conditionForm.condition.length > 0) {
        let conditionlabels = [];
        for (let i = 0; i < this.conditionForm.condition.length; i++) {
          conditionlabels.push(this.conditionForm.condition[i].label);
        }
        let Check = conditionlabels.indexOf(item.label);
        Check == -1
          ? this.conditionForm.condition.push(filterItem)
          : this.$message.error("请勿重复添加");
      } else {
        this.conditionForm.condition.push(filterItem);
      }

      this.showFilterCondition = false;
    },
    removeDomain(item) {
      let index = this.conditionForm.condition.indexOf(item);
      if (index !== -1) {
        this.conditionForm.condition.splice(index, 1);
      }
      if (item.label === "提交时间") {
        this.submitTime = [];
      }
      let props = JSON.parse(JSON.stringify(this.conditionForm.condition));
      let params = {};
      props.forEach(v => {
        params[v.parameter] = v.value;
      });
      if (params.created_at) {
        params.createdTime = params.created_at;
        delete params.created_at;
      }
      this.search_params = params;
      this.getTableData();
    },
    submitsearch(formName) {
      let that = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          let props = JSON.parse(JSON.stringify(this.conditionForm.condition));
          let params = {};
          props.forEach(v => {
            params[v.parameter] = v.value;
          });
          if (params.created_at) {
            params.createdTime = params.created_at;
            delete params.created_at;
          }
          this.current_page = 1;
          this.$refs["soft-table"].clearSort();
          this.search_params = params;
          this.getTableData();
          this.showFilterCondition = false;
          this.showFilter = false;
        }
      });
    },
    resetForm(formName) {
      // this.$refs[formName].resetFields()
      this.conditionForm.condition.forEach(v => {
        if (v.value) {
          v.value = null;
        }
      });
      this.$refs["soft-table"].clearSort();
      this.$nextTick(() => {
        this.$refs[formName].clearValidate();
      });
      // this.getTableData()
      // this.showFilterCondition = false
      // this.showFilter = false
    },
    // 获取用户信息
    getUserData() {
      this.$axios.get("/api/consumer/show").then(res => {
        if (res.data.code == "200") {
          this.userData = res.data.data;
          console.log(res.data);
        }
      });
    }
  }
};
</script>

<style lang='less' >
.files {
  width: 90%;
  height: 100%;
  margin: 0 auto;
  padding: 25px 30px;
  background: #fff;
  box-sizing: border-box;
  &-header {
    height: 45px;
    float: left;
    .el-breadcrumb {
      .el-breadcrumb__item {
        .el-breadcrumb__inner,
        .el-breadcrumb__separator {
          font-size: 25px;
          color: rgba(0, 35, 151, 1);
          font-weight: 400;
        }
      }
      .el-breadcrumb__item:first-child {
        .el-breadcrumb__inner {
          padding-left: 10px;
          border-left: 5px solid #002397;
        }
      }
    }
  }
}
.software{
  height: 100%;
  #IMTable {
    height: 70%; //撑满表格
  }
}
.pagination {
    margin-top: 10px;
}
.font_wait {
  color: rgba(255, 0, 0, 1);
}
.font_processing {
  color: rgba(32, 147, 20, 1);
}
.font_complete {
  color: rgba(0, 83, 195, 1);
}
.writing2 {
  display: block;
  padding: 2px 13px;
  font-size: 15px;
  float: right;
  margin-right: 20px;
  border: 1px solid rgba(36, 157, 255, 1);
  border-radius: 12px;
  text-align: center;
  background: rgba(36, 157, 255, 1);
  color: #fff;
}
.soft-patent2 {
  display: block;
  color: rgba(36, 157, 255, 1);
  font-size: 15px;
  float: right;
  margin-right: 20px;
  padding: 2px 13px;
  border: 1px solid rgba(36, 157, 255, 1);
  border-radius: 12px;
  text-align: center;
}
.icon-filedload {
  display:block;
  width: 18px;
  height: 24px;
  margin: 0 auto;
  background:url('../../../../assets/img/图标.png') no-repeat;
  background-position:-353px -317px;
}
.el-checkbox__label {
  color: rgba(142, 142, 142, 1) !important;
}
/deep/.ivu-poptip-inner {
  min-width: 360px;
  // height: 300px;
  overflow-y: scroll;
}

/deep/.poptip-condition .ivu-poptip-inner {
  min-width: 180px;
}
.down-execel2 {
  display: block;
  font-size: 15px;
  float: right;
  margin-right: 20px;
  padding: 2px 13px;
  border: 1px solid rgba(36, 157, 255, 1);
  border-radius: 12px;
}
.lookup-list {
  //   display: inline-block;
  //   text-align: center;
  // margin-left: 15px;
}

.demo-dynamic {
  width: 360px;
  padding-left: 10px;

  .el-form-item {
    margin-bottom: 12px;
  }

  .el-input {
    width: 200px;
  }

  .el-date-editor {
    width: 200px;
  }

  .el-button {
    padding: 9px 15px;
    vertical-align: baseline;
  }

  .el-form-item__error {
    padding-top: 0;
  }
}

.poptip-condition {
  display: block;
  margin: 10px 0;

  .poptip-condition-item {
    line-height: 25px;
    cursor: pointer;
  }

  .poptip-condition-add {
    font-size: 15px;
  }
}

.btns {
  margin-top: 10px;
  text-align: right;
  margin-right: 60px;
}
</style>